{extends file="../home.html"}
{block name="title"}{$head_title}{/block}
{block name="css"}
<!-- <link rel="stylesheet" style="text/css" href="__PUBLIC__/Css/front/user_glb.css?version={$version}"> -->

<style type="text/css">
	body{
		padding-top:2.2rem;
	}
	.period-hide{
		display:none;
	}
    .period-show{
    	width:100%;
    	flex-wrap:wrap;
    	justify-content:space-around;
    	display:flex;
    }
    .period-items{
    	width:33%;
    	height:2rem;
    	display:flex;
    	align-items:center;
    }
    .period-items i{
    	margin:0;
    	margin-right:0.1rem;
    }
    .period-items span{
    	display:block;
    	font-size:0.6rem;
    }
    .order-time .spread{
    	transform:rotate(0deg);
    	transition:1000;
    }
    input[type="date"]:before{
        content: attr(placeholder);
    }
    #date{
        background-color: transparent;
    }
</style>
{/block}
{block name="content"}
{include file="../common_header.html"}
<form>
<ul class="visit_from">
    <li class="clearfix">
        <label for="yin" class="fl">场地名称</label>
        <input type="text" id="yin" name="" value="{$site_info.site_name}" placeholder="请输入场地名称" readonly>
        <input type="hidden" name="site_id" value="{$site_id}">
    </li>
    <li class="clearfix order-time">
        <label for="date" class="fl">预约时间</label>
        <input type="date" id="date" name="order_time" value="" placeholder="请选择预约时间">
        <i class="fr icon icon_enter_default3x spread"></i>
        <ul class="period-hide">
        </ul>
    </li>
    <li class="clearfix">
        <label for="name" class="fl">预定单位</label>
        <input type="text" id="name" name="order_company" value="" placeholder="请输入预定单位名称">
    </li>
    <li class="clearfix">
        <label for="name_ren" class="fl">联系人</label>
        <input type="text" id="name_ren" name="linkman" value="" placeholder="请输入联系人姓名">
    </li>
    <li class="clearfix">
        <label for="tell" class="fl">联系人电话</label>
        <input type="number" id="tell" name="linkphone" value="" placeholder="请输入联系人电话">
    </li>
    <li class="clearfix">
        <label for="number" class="fl">与会人数</label>
        <input type="number" id="number" name="order_num" value="" placeholder="请输入与会人数">
    </li>
</ul>
        <input id="range_time" name="range_time" type="hidden" value="">
<h6 class="bei">备注</h6>
<textarea name="mark" placeholder="请输入备注" class="bei_txt"></textarea>
</form>
<div class="submit_btn">提交</div>
{/block}
{block name="js"}
<script>
    var site_id = {$site_id};
</script>
<!-- <script type="text/javascript" src="__PUBLIC__/Js/front/iscroll.js"></script> -->
        <script type="text/javascript">
        var site_id = '{$site_id}'
        {literal}
                /*$(window).load(function() {
                });*/
            var myDate,myYear,myMonth,myDay,nowDate,nowYear,nowMonth,nowDay;
            $("#date").blur(function(){

            	myDate = $("#date").val();
	        	myDate = myDate.split("-");
	        	myYear = parseInt(myDate[0]);
	        	myMonth = parseInt(myDate[1]);
	        	myDay = parseInt(myDate[2]);
	        	nowDate = new Date();
	        	nowYear = nowDate.getFullYear();
	        	nowMonth = nowDate.getMonth()+1;
	        	nowDay = nowDate.getDate();
                console.log('myYear：'+myYear)
                console.log('nowYear'+nowYear)
                console.log('myMonth'+myMonth)
                console.log('nowMonth'+nowMonth)
                console.log('myDay'+myDay)
                console.log('nowDay'+nowDay)
            	if(myYear<nowYear){
                    if(myMonth<nowMonth){
                        if(myDay<nowDay){
                            layer.open({
                                content: '请选择有效时间',
                                title: false,
                                btn: ['确定'],
                            });
                            return;
                        }
                    }
            		
            	}
                $.ajax({
                    url:'/FrontSite/choose_time',
                    type:'post',
                    data:{site_id:site_id, my_date:$("#date").val()},
                    success:function(data){
                        if(data != null){
                            var len = data.length;
                            var html = '';
                            for (var i = 0; i < len; i++) {
                               html += '<li class="period-items" data-range_key = "'+data[i].key+'">\
                            <i class="pic icon_xuanze_default3x"></i>\
                            <span>'+data[i].start_hour+':00-'+data[i].end_hour+':00</span>\
                        </li>';
                            }
                            $('.period-show').find('li').remove()
                            $('.period-show').append(html)
                            time_select();
                        }
                    }
                })

            });
            $(function()
            {
                $(".service_header i,.service_header span").on("click",function()
                {
                    history.go(-1);
                });
                $(".submit_btn").on("click",function()
                {
                	
                    if($("#yin").val()=='')
                    {
                        layer.open({
                            content: '请输入场地名称',
                            title: false,
                            btn: ['确定'],
                        });
                        return;
                    }
                    if($("#date").val()=='')
                    {
                        layer.open({
                            content: '请选择时间',
                            title: false,
                            btn: ['确定'],
                        });
                        return;
                    }
                    if(myYear<nowYear){
                        if(myMonth<nowMonth){
                            if(myDay<nowDay){
                                layer.open({
                                    content: '请选择有效时间',
                                    title: false,
                                    btn: ['确定'],
                                });
                                return;
                            }
                        }
                        
                    }
                    if($("#range_time").val()=='')
                    {
                        layer.open({
                            content: '请选择时间段',
                            title: false,
                            btn: ['确定'],
                        });
                        return;
                    }
                    if($("#name").val()=='')
                    {
                        layer.open({
                            content: '请输入预定单位名称',
                            title: false,
                            btn: ['确定'],
                        });
                        return;
                    }
                    if($("#name_ren").val()=='')
                    {
                        layer.open({
                            content: '请输入联系人姓名',
                            title: false,
                            btn: ['确定'],
                        });
                        return;
                    }
                    if($("#number").val()=='')
                    {
                        layer.open({
                            content: '请输入与会人数',
                            title: false,
                            btn: ['确定'],
                        });
                        return;
                    }
                    if($("#tell").val()=='')
                    {
                        layer.open({
                            content: '请输入联系人电话',
                            title: false,
                            btn: ['确定'],
                        });
                        return;
                    }
                    $.ajax({
                        type:'POST',
                        url:'FrontSite/site_order',
                        data:$('form').serialize(),
                        success:function (data) {
                            if(data.status == 0){
                                layer.open({
                                    content:data.msg ,
                                    title: false,
                                    btn: ['确定'],
                                    yes:function(){
                                        if(!is_wechat()){
                                            var dataUrl = '/FrontSite/site_order_detail/order_id/'+data.order_id;
                                            var _json = JSON.stringify({
                                                event: "to_jump",
                                                params: {"url":dataUrl}
                                            });
                                            if(is_ios()){
                                                window.webkit.messageHandlers.webviewEvent.postMessage(_json);
                                            }else{
                                                window.ResultAndroid.webviewEvent(_json);
                                            }
                                        }else{
                                            location.href = '/FrontSite/site_order_detail/order_id/'+data.order_id;
//                                            history.go(-1);
                                        }
                                    }
                                });
                            }else{
                                layer.open({
                                    content: data.msg,
                                    title: false,
                                    btn: ['确定']
                                })
//                                alert(data.msg);
                            }
                        }
                    })
                });
            });
            $(document).ready(function(){
            	$("#date").focus(function(){
            		$(".order-time ul").removeClass("period-hide").addClass("period-show");
            		$(".order-time .period-show").siblings("i").css({
            			"transform":"rotate(90deg)"
            		});
            	});
            	$(".order-time i.spread").on("click",function(){
            		$(".order-time ul").toggleClass("period-show").toggleClass("period-hide");
            		$(".order-time .period-hide").siblings("i").css({
            			"transform":"rotate(0deg)"
            		});
            		$(".order-time .period-show").siblings("i").css({
            			"transform":"rotate(90deg)"
            		});
            	});
            	
            });
            function time_select(){
                    $('.period-items').on( "click",function(){
                        
                        $(this).children("i")
                        .toggleClass("icon_xuanze_selected3x")
                        .toggleClass("icon_xuanze_default3x");
                        var range_time ='';
                        $('.icon_xuanze_selected3x').each(function () {
                            $(this).parent().data('range_key');
                            range_time += $(this).parent().data('range_key')+',';
                        })
                        range_time = range_time.substr(0, range_time.length - 1);
                        console.log(range_time);
                        $("#range_time").val(range_time);
                    });
                }
            //date的placeholder兼容方案
            var i_date = document.getElementById('date');
            i_date.onfocus = function(){
                this.removeAttribute('placeholder');
            };
            i_date.onblur = function(){
                if(this.value == '') this.setAttribute('placeholder','请选择预约时间');
            };
        </script>
{/literal}
{/block}